<template>
  <div id="app">
    <div>
      <router-view
        name="background"
        style="width: 100%; position: absolute; z-index: -1"
      ></router-view>
    </div>
    <router-view v-if="isRouterAlive" style="" name="nav" />
    <!-- <transition name="slide-fade"> -->
    <router-view />
    <!-- </transition> -->
  </div>
</template>

<script>
export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  name: 'App',
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  },
  mounted () {
    console.log('尝试加载用户信息')
    var _this = this
    this.$axios({
      method: 'post',
      url: '/login/success'
    }).then(function (response) {
      console.log(response.data.result)
      if (response.data.code === 1) {
        _this.$CommonVar.UserInformation = response.data.result
        _this.reload()
      } else {
        console.log('登录信息过期了')
        // _this.$cookies.delete('JSESSIONID')
      }
    })
  }

}
</script>

<style>
.html {
  height: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0.1;
}
</style>
